<div class="hidden-audio" id="hidden-audio-<%= episode.slug %>" style="display:none" data-episode="<%= episode.slug %>" data-podcast="<%= podcast.slug %>">
  <audio id="audio" data-episode="<%= episode.slug %>" data-podcast="<%= podcast.slug %>">
    <source src="<%= episode.media_url %>" type="audio/mpeg">
    <%= t("views.podcasts.unsupported") %>
  </audio>
  <div id="progressBar" class="audio-player-display">
    <a href="/<%= podcast.slug %>/<%= episode.slug %>">
      <%= optimized_image_tag(episode.image_url || podcast.image_url,
                              optimizer_options: { crop: "crop", width: 420, height: 420 },
                              image_options: { id: "episode-profile-image", alt: episode.title }) %>
      <img id="animated-bars" src="<%= asset_path("animated-bars.gif") %>" alt="animated volume bars">
    </a>
    <span id="barPlayPause">
      <img class="butt play-butt" alt="play" src="<%= asset_path("playbutt.png") %>">
      <img class="butt pause-butt" alt="pause" src="<%= asset_path("pausebutt.png") %>">
    </span>
    <span id="volume">
      <span id="volumeindicator" class="volume-icon-wrapper showing">
        <span id="volbutt">
          <%= image_tag("volume.png", alt: "volume", class: "icon-img", height: 16, width: 16) %>
        </span>
        <span class="range-wrapper">
          <input aria-label="Volume" type="range" name="points" id="volumeslider" value="50" min="0" max="100" data-show-value="true">
        </span>
      </span>
      <span id="mutebutt" class="volume-icon-wrapper hidden">
        <%= image_tag("volume-mute.png", alt: "volume-mute", class: "icon-img", height: 16, width: 16) %>
      </span>
      <span class="speed" id="speed" data-speed=1><%= t("views.podcasts.speed") %></span>
    </span>
    <span class="buffer-wrapper" id="bufferwrapper">
      <span id="buffer"></span>
      <span id="progress"></span>
      <span id="time"><%= t("views.podcasts.initializing") %></span>
      <span id="closebutt"><%= t("views.podcasts.close") %></span>
    </span>
  </div>
</div>
